<template>
 <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import { mapState } from 'vuex'
import * as echarts from 'echarts'
export default {
  name: "",
  computed: {
    ...mapState({
        device: state => state.app.device,
    })
  },
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
      return {
          data:'',
          options:{
            title: [
              {
                text: '',
                left: 'center',
                bottom: '0',
                textStyle: {
                  color: '#333',
                  fontSize: 14,
                  fontWeight: 'normal'
                }
              },
              {
                text: ``,
                left: 'center',
                top: 'center',
                textStyle: {
                  color: '#333',
                  fontSize: 16,
                  fontWeight: 'bold'
                }
              }
            ],
            series: [
              {
                type: 'pie',
                radius: ['20%', '25%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                label: {
                  show: false
                },
                emphasis: {
                  scale: false
                },
                data: [
                  {
                    value: 0,
                    name: '占比',
                    itemStyle: {
                      color: '',
                      borderRadius: 5,
                    }
                  },
                  {
                    value: 0,
                    name: '剩余',
                    itemStyle: {
                      color: '#eee'
                    }
                  }
                ]
              }
            ]
          }
      };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart(){
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption(this.options)
    },
    loadChart(data){
      console.log(this.options)
      this.options.title[0].text = data.title
      this.options.title[1].text= data.data +'%'
      this.options.series.data[0].value =  data.data
      this.options.series.data[0].itemStyle.color =  data.color
      this.options.series.data[1].value = 100 - data.data
      this.chart.setOption(this.options, true)
  }
  }
};
</script>

<style scoped lang="scss">
</style>
